<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	lang="zh">

<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" style="width: 100%; height: 100%;">
    <div id="map" style="width: 100%; height: 100%;"></div>
</div>
<div th:include="include::footer"></div>
 
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js}"></script>
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js}"></script>
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js}"></script>
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js}"></script>
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js}"></script>
<script type="text/javascript" th:src="@{https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126}"></script>
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js}"></script>
<script type="text/javascript" th:src="@{http://echarts.baidu.com/gallery/vendors/simplex.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "gxgw_modules/machine";
    var userData = {};
    var getUserData = new Promise( function (resolve, reject) {
        var geolocation = new BMap.Geolocation();
        // 创建地理编码实例
        var myGeo = new BMap.Geocoder();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var pt = r.point;
                userData.value = [parseFloat(pt.lng.toFixed(2)),parseFloat(pt.lat.toFixed(2))];
                userData.name = r.address.province + r.address.city;
                console.log(userData);
                resolve();
            }
        });
    });

    var getData = function (data) {
        var res = {0: [], 1: []};
        data.forEach(function (item) {
            res[item.macState].push({name: item.macAddress, value: [item.macLong, item.macLat]});
        })
        return res;
    };

    $.post(prefix+"/listMap", function(data){
        var resultData = getData(data);
        resultData.user = [userData];
        console.log(resultData);

        var app = {};
        var myChart = echarts.init(document.getElementById('map'));
        var option = {
            // backgroundColor:"#1e345d",
            color:['#fc3737','#00ff00'],/*地图上面的两大项颜色*/
            tooltip: {
                trigger: 'item',
                formatter: function (data) {
                    if(data.seriesType === "scatter" || data.seriesType === "effectScatter"){
                        return data.seriesName +
                            "<br/>设备地址：" + data.name +
                            "<br/>经纬度：" + data.value.toString();
                    }
                }
            },
            legend: {
                orient: 'horizontal',
                left: '50',
                top:'10',
                data: ['正常使用', '关机'],
                textStyle:{
                    color:'#ffffff'
                },
                icon:'circle',
            },
            bmap: {
                zoom:11,
                roam: true,
                center : [113.23,23.16],
                // center: resultData.user[0].value || [113.23,23.16],
                layoutSize : "100%"
            },
            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [
                {
                    name: '正常使用',
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    itemStyle: {
                        normal: {
                            shadowBlur: 20,
                            shadowColor: '#FFF68F'
                        }
                    },
                    data: resultData['1'],
                    symbolSize: 13,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        }
                    },
                    zlevel: 1
                },
                {
                    name: '关机',
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    data: resultData['0'],
                    symbolSize: 13,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    }
                },
                {
                    name: '当前位置',
                    type: 'scatter',
                    coordinateSystem: 'bmap',
//                        data: [{name: "广东省汕头市", value: [116.73, 23.38]}],
                    data: resultData.user,
                    symbol: 'pin', //气泡
                    symbolSize: 26,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f93427', //标志颜色
                        }
                    }
                },
            ]
        };
        myChart.setOption(option);
        if (!app.inNode) {
            // 添加百度地图插件
            var bmap = myChart.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());
        }
        getUserData.then(function () {
            option.bmap.center = resultData.user[0].value;
            myChart.setOption(option, true);
        })

    })



</script>
</body>
</html>
